<template>
    <uni-popup ref="cupopup" @change="popupChange" :safe-area="false">
        <view class="popup-content" style="padding-top: 0">
            <view class="good_coupon_list">
                <view class="good_coupon_list_container">
                    <view class="header">可用优惠券</view>
                    <scroll-view
                        scroll-top="scrollTop"
                        scroll-y="true"
                        class="scroll"
                        @scrolltoupper="upper"
                        @scrolltolower="lower"
                        :show-scrollbar="fasle"
                        @scroll="scroll">
                        <coupon
                            v-for="(item, index) in Data.listData"
                            :key="item.id"
                            :Data="item"
                            @click="choose(index, item)">
                            <template #right>
                                <view class="coupon-right" @click="choose(index, item)">
                                    <image
                                        v-if="item.active"
                                        class="img-icon"
                                        :src="getImgOssUrl('/ui-prod-2.0.0/radio_active_icon_2.0.png')"></image>
                                    <image
                                        v-else
                                        class="img-icon"
                                        :src="getImgOssUrl('/ui-prod-2.0.0/radio_icon_2.0.png')"></image>
                                </view>
                            </template>
                        </coupon>
                    </scroll-view>
                    <view v-if="!Data.listData.length" class="none">
                        <img class="empty" :src="getImgOssUrl('/ui-prod-2.0.0/empty_coupon_2.0.png')" alt="" />
                        <view class="title">暂无可用优惠券</view>
                    </view>
                    <view class="botton_block">
                        <view class="botton" @click="selectHanlder">确定</view>
                    </view>
                </view>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
import coupon from '@/components/coupon';
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import { getImgOssUrl } from '@/commons/utils';
import { useTrace } from '@/commons/trace';
import subscribe from '@/commons/subscribe';
import store from '@/store';

const goodsStore = store.useGoodsStore();

const { traceLoad, traceReport } = useTrace();
const props = defineProps(['visiable']);
const emit = defineEmits(['select']);
const Data = reactive({
    listData: []
});
const getCouponList = () => {
    const list = goodsStore.couponList;
    Data.listData = list.map(x => {
        return {
            id: x.id,
            active: x.active,
            couponDiscount: x.customerCouponDiscountContent,
            couponType: x.customerCouponType,
            couponTitle: x.customerCouponTitle,
            couponTimeStart: (x.customerCouponExpireTimeStart || ' ').split(' ')[0].replaceAll('-', '.'),
            couponTimeEnd: (x.customerCouponExpireTimeEnd || ' ').split(' ')[0].replaceAll('-', '.'),
            couponTimeType: 1,
            couponPrerequisites: x.customerCouponPrerequisites,
            couponPrerequisitesAdditional: x.customerCouponPrerequisitesAdditional
        };
    });
};

const cupopup = ref(null);
watch(
    () => props.visiable,
    val => {
        if (val) {
            getCouponList();
            cupopup.value.open('bottom');
        } else {
            cupopup.value.close();
        }
    }
);

const choose = (index, item) => {
    if (item.active) {
        Data.listData[index].active = false;
        goodsStore.couponList[index].active = false;
    } else {
        Data.listData.map(el => (el.active = false));
        Data.listData[index].active = true;
        goodsStore.couponList.map(el => (el.active = false));
        goodsStore.couponList[index].active = true;
    }
    goodsStore.isCouponPage = true;
};

const selectHanlder = () => {
    emit('select');
};

const popupChange = val => {
    if (!val.show) {
        emit('select');
    }
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.good_coupon_list {
    .header {
        text-align: center;
        font-size: 31rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fe292b;
        line-height: 100rpx;
        height: 100rpx;
    }
    .good_coupon_list_container {
        padding: 0 29rpx;
        // 80+30+30-29
        padding-bottom: 111rpx;
        min-height: 20vh;
        position: relative;
        .scroll {
            max-height: 60vh;
            margin-bottom: var(--safe-area-inset-bottom);
        }
        .coupon-right {
            height: 100%;
            display: flex;
            min-width: 72rpx;
            align-items: center;
            .img-icon {
                width: 36rpx;
                height: 36rpx;
            }
        }
        .botton_block {
            bottom: 0;
            position: absolute;
            width: 100%;
            background: #ffffff;
            padding: 30rpx 0;
            padding-bottom: calc(24rpx + var(--safe-area-inset-bottom));
        }
        .botton {
            width: 690rpx;
            height: 80rpx;
            background: #fe292b;
            border-radius: 40rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
    }
    .none {
        margin: 150rpx auto 250rpx;
        width: 290rpx;
        height: 256rpx;
        text-align: center;
        .empty {
            width: 100%;
            height: 100%;
        }
        .title {
            height: 40px;
            font-size: 29rpx;
            color: #333333;
            line-height: 40px;
        }
    }
}
</style>
